@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

input::-ms-clear, input::-ms-reveal{
  display: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.gl_button_long {
  width: 100%;
  margin-bottom: 30px;
}

// main-container global css
.app-container {
  min-height: calc(100vh - 140px);
  width: 100%;
  position: relative;
  // overflow: hidden;
  // background: #fff;
}
.gl_contentBox {
  position: relative;
  width: 100%;
  padding: 15px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.gl_contentBox_noShadow {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.hasTagsView {
  .gl_heightFull {
    min-height: calc(100vh - 184px);
  }
}
.gl_heightFull {
  min-height: calc(100vh - 140px);
  box-sizing: border-box;
}
// 登录、注册、忘记密码公共样式
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

// $bg: #283443;
$bg_gray: #fff;
// $cursor: #fff;
$text_color: #283443;

@supports (-webkit-mask: none) and (not (cater-color: $bg_gray)) {
  .permission-container .el-input input {
    color: $text_color;
  }
}

/* reset element-ui css */
.permission-container {
  padding-left: 0;
  .el-input {
    display: inline-block;
    height: 40px;
    width: 85%;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 6px 5px 6px 15px;
      color: $text_color;
      height: 40px;
      caret-color: $text_color;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg_gray inset !important;
        -webkit-text-fill-color: $text_color !important;
      }
    }
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: $bg_gray;
    border-radius: 4px;
    color: rgba(0,0,0,0.25);
    margin-bottom: 30px;
    .el-input__inner {
      background-color:$bg_gray;
    }
    .el-input-group__append {
      background-color: $bg_gray;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
    }
  }
}
// .game_login{
  .permission-container {
    padding: 0 60px;
    .permission-form {
      margin-top: 30px;
      width: 280px;
    }
    .el-form-item {
      border: 1px solid #d9d9d9;
    }
  }
// }
.mobile_login {
  .permission{
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .permission-form{
      width: 84%;
      margin-top: 20px;
      min-width: 280px;
      .title {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
      }
      .center_box {
        font-size: 12px;
        color:#606266;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
      .el-form-item {
        border-bottom: 1px solid #d7d7d7;
        color: #d7d7d7;
        margin-bottom: 30px;
        .el-form-item__label {
          line-height: 40px;
        }
        .el-form-item__content {
          line-height: 40px;
          .el-input__inner {
            line-height: 40px;
            background-color: $bg_gray;
          }
          .el-input-group__append {
            background-color: $bg_gray;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
          }
        }
      }
      .el-checkbox {
        margin: 7px 0;
      }
      .el-input {
        display: inline-block;
        height: 40px;
        input {
          background: transparent;
          font-size: 14px;
          border: 0;
          border-radius: 0px;
          padding: 6px 5px 6px 15px;
          color:#8C8C8C;
          height: 40px;
        }
      }
    }
  }
}

$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$bu_bgcolor: #073190;
$hall_bu_bgcolor: #987EED;

.permission-container {
  min-height: 100%;
  overflow: hidden;
  position: relative;
  padding-left: 170px;
  z-index: 2;

  .permission-form {
    position: relative;
    width: 368px;
    max-width: 100%;
    overflow: hidden;

    .logo {
      // width: 80%;
      text-align: center;
      height: 130px;
      margin: 0 auto;
    }
    .text {
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0,0,0,0.45);
      line-height: 22px;
    }
    .title {
      font-size: 16px;
      color: rgba(0,0,0,0.85);
      margin: 0px auto 20px auto;
      font-weight: bold;
    }
    .el-button--primary {
      width: 100%;
      height: 40px;
      background: $bu_bgcolor;
      border-radius: 4px;
      border: 1px solid $bu_bgcolor;
      letter-spacing: 4px;
    }
    .el-button--text {
      border-color: transparent;
      color: $bu_bgcolor;
      background: transparent;
      padding-left: 0;
      padding-right: 0;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: $bu_bgcolor;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: $bu_bgcolor;
      border-color: $bu_bgcolor;
    }
  }

  .permission-form.hall {
    position: relative;
    width: 368px;
    max-width: 100%;
    overflow: hidden;

    .logo {
      // width: 80%;
      text-align: center;
      height: 130px;
      margin: 0 auto;
    }
    .text {
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0,0,0,0.45);
      line-height: 22px;
    }
    .title {
      font-size: 16px;
      color: rgba(0,0,0,0.85);
      margin: 0px auto 20px auto;
      font-weight: bold;
    }
    .el-button--primary {
      width: 100%;
      height: 40px;
      background: $hall_bu_bgcolor;
      border-radius: 4px;
      border: 1px solid $hall_bu_bgcolor;
      letter-spacing: 4px;
    }
    .el-button--text {
      border-color: transparent;
      color: $hall_bu_bgcolor;
      background: transparent;
      padding-left: 0;
      padding-right: 0;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: $hall_bu_bgcolor;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: $hall_bu_bgcolor;
      border-color: $hall_bu_bgcolor;
    }
  }

  .svg-container {
    padding: 0px 5px 3px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 2px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
.demo-input-suffix {
  padding-bottom: 10px;
  span {
    font-size: 14px;
  }
  .el-input {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
}
// 重置表单的上下间隔 ，在el-form上加上这个类
.gl_form_mini{
  .el-form-item{
    margin-bottom: 20px;
  }
  .el-form-item__label{
    line-height: 32px;
    padding-bottom: 0;
  }
  .el-form-item__content{
    line-height: 32px;
  }
}
.gl_form_mini.el-form--label-top .el-form-item__label{
  line-height: 32px;
  padding-bottom: 0;
}
#app .main-container{
  background: #f0f2f5;
  // padding-bottom: 20px;

}
// 重置弹框的表头，加下划线
.gl_dialog_TitleLine{
  .el-dialog__header{
    border-bottom: 1px solid #dcdee0;
  }
}

// 重置弹框的footer
.gl_dl_footer .el-dialog__footer{
  border-top: 1px solid #DCDFE6;
  text-align: center;
  padding-top: 18px;
}
.gl_dl_footer .el-dialog__footer .el-button--mini{
  border-radius: 8px;
  height: 32px;
  padding-right: 18px;
  padding-left: 18px;
}
// 重置步骤条字体大小
.el-step__main .el-step__title {
  font-size: 14px;
  line-height: 35px;
}
// 公共BOX模块样式
.gl_row_box{
  background: #f4f4f4;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
}
// 公共边框盒子样式
.gl_borderBox {
  padding: 15px;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
  border: 1px solid #d2d2d2;
}
// 重置弹框高度
.gl_dialog_height{
  min-height: 300px;
  max-height: 500px;
  overflow: hidden;
}
.el-dialog__body {
  padding: 20px !important;
}
// 表格为空时设置最小高度
.el-table__empty-text {
  line-height: 300px !important;
  min-height: 300px;
}
.el-table__expanded-cell .el-table__empty-text{
  line-height: 60px !important;
  min-height: 60px;
}
.el_table_miniheight .el-table__empty-text {
  line-height: 60px !important;
  min-height: 60px;
}
// table 多选时 checkbox宽度 水平居中
.el-table .el-table_1_column_1 .el-table-column--selection .is-leaf {
  width: 48px;
}
.el-table .el-table-column--selection .cell .el-checkbox {
  position: relative;
  left: 50%;
  margin-left: -7px;
 }
 .el-table thead th {
  color: #333;
  background: #eaf5ff;
 }
//  影响了全局表格中的按钮，请在自己作用域下使用
//  .el-table .cell .el-button {
//   padding: 0;
//  }

 // 表单form-item
 .form_item {
   height: 47px;
 }
 // 重置计数器的padding
 .gl_input_number .el-input-number.is-without-controls .el-input__inner{
  padding-left: 5px;
  padding-right: 5px;
 }
//  表单数据显示用
.gl_form_preview {
  .title {
    text-align: right;
    display: inline-block;
    width: 120px;
    line-height: 35px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 12px;
  }
  .content {
    font-weight: 700;
  }
}

.game_page {
  box-sizing: border-box;
  width: 1200px;
  margin: 0 auto;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.1);
}
.el-avatar {
  background: none !important;
  border: 1px solid #e6ebf5 !important;
}

.event_select .el-form-item__label{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// .data_range .el-tree-node__children .el-checkbox {
//   display: none;
// }

@font-face {
   font-family: 'number_count';  //重命名字体名
   src: url('../assets/font/Oswald-Stencil-Regular-2.ttf');
}

.gl_move_dialog .el-dialog__header{
  padding: 0;
}
// 重置tabs样式
.gl_tabs.el-tabs--card > .el-tabs__header{
  .el-tabs__nav{
    border: none;
    .el-tabs__item{
      background: #f7f7f7;
      border: 1px solid #e9e9e9;
      margin-right: 2px;
      border-radius: 4px 4px 0px 0px;
      &.is-active{
        background: #fff;
        border-bottom: transparent;
      }
    }
  }
}
.gl_btn_bg_F .el-button--primary.is-plain{
  background: #fff;
  border-color: transparent;
}
// 重置新建培训里的上传
.upload_file_train .file_name {
  font-size: 12px;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  transition: all 0.1s ease;
}
.upload_file_train .file_name:hover {
  text-decoration: underline;
  color: #5cadff;
}
.upload_file_train .el-upload {
  width:100%
}
.upload_file_train .el-upload .upload_button{
  width:100%
}
// 重置新建培训里的输入框
.train_setting .el-input-number--mini{
  width: 100%;
} 
.train_setting .el-input-number.is-without-controls .el-input__inner{
  text-align: left;
}
.general_title .el-input__inner {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius:0;
}

.gl_scrollbar {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar{
    width: 6px;
    height: 6px;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb{
    border-radius: 12px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: rgba(144, 147, 153, 0.3);
  }
}

// 修改商城管理-新增/修改商品label
.editGoods .el-form-item__label{
  padding: 0 40px 0 0;
}
.editGoods .checkbox_sizes .el-checkbox__label{
  font-size: 16px;
}
.goods_table.gl_table_noBorder.el-table,.goods_table.gl_table_noBorder .el-table__body-wrapper{
  min-height: auto;
  background-color: #f8f8f8;
}
.goods_table.gl_table_noBorder.el-table::before{
  height: 0;
}
.goods_table.gl_table_noBorder.el-table thead th{
  background: #f8f8f8;
  color: rgba(0,0,0,0.50);
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-Regular;
}
.goods_table.gl_table_noBorder.el-table tr{
  background: #f8f8f8;
  color: #353434;
  font-size: 16px;
}
.goods_table.gl_table_noBorder.el-table--mini th, .el-table--mini td{
  padding: 18px 0;
}
.goods_table.gl_table_noBorder.el-table {
  border-left: none;
  border-top: none;
}
.goods_table.gl_table_noBorder.el-table td {
  border-right: none;
  border-left: none;
  border-bottom: none;
  padding: 7px 0;
}
.goods_table.gl_table_noBorder.el-table th {
  border-right: none;
  border-left: none;
}
.goods_table.gl_table_noBorder.el-table {
  // border-left: 1px solid #EBEEF5;
  // border-top: 1px solid #EBEEF5;
}
